<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item>
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="showInsert"
        >{{ $t('insert') }}
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="systemHookList"
      style="width: 100%"
    >
      <el-table-column
        width="150"
        prop="connectType"
        :label="$t('type')"

        :formatter="formatConnectType"
      />
      <el-table-column
        width="300"
        prop="connectUrl"
        :label="$t('url')"
      />
      <el-table-column
        width="150"
        prop="protocol"
        :label="$t('protocol')"
      />
      <el-table-column
        prop="retryNum"
        :label="$t('retryNum')"
      />
      <el-table-column
        width="150"
        prop="topic"
        :label="$t('topic')"
      />
      <el-table-column
        width="150"
        prop="deviceName"
        :label="$t('device')+$t('name')"
      />
      <el-table-column
        width="150"
        prop="userName"
        :label="$t('user')"
      />
      <el-table-column
        width="150"
        prop="companyName"
        :label="$t('company')"
      />
      <el-table-column
        width="150"
        prop="deptName"
        :label="$t('dept')"
      />
      <el-table-column
        width="150"
        prop="serverName"
        :label="$t('server')"
      />
      <el-table-column
        width="150"
        prop="productName"
        :label="$t('product')"
      />
      <el-table-column
        width="150"
        prop="seriesName"
        :label="$t('series')"
      />
      <el-table-column
        width="150"
        prop="provinceName"
        :label="$t('province')"
      />
      <el-table-column
        width="150"
        prop="cityName"
        :label="$t('city')"
      />
      <el-table-column :label="$t('status')">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.deviceStatus"
            disabled
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('warn')">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.deviceWarn"
            disabled
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('upload')">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.deviceUpload"
            disabled
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('status')" width="70">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.status?'success':'danger'"
            @click="changeStatus(scope.row)"
            v-text="scope.row.status ? $t('enable'):$t('DISABLE')"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('function')" width="150">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="edit(scope.row)"
          >{{ $t('edit') }}
          </el-button>
          <el-button
            style="color: #f56c6c"
            type="text"
            icon="el-icon-delete"
            @click="del(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="dialogCropVisible"
    >
      <el-form
        label-width="20%"
        :model="systemHook"
      >
        <el-form-item
          :label="$t('url')"
        >
          <el-input v-model="systemHook.connectUrl" :disabled="systemHook.hookId"/>
        </el-form-item>
        <el-form-item
          :label="$t('topic')"
        >
          <el-input v-model="systemHook.topic" :disabled="systemHook.hookId"/>
        </el-form-item>
        <el-form-item
          :label="$t('retryNum')"
        >
          <el-input v-model="systemHook.retryNum"/>
        </el-form-item>
        <el-form-item
          :label="$t('protocol')"
        >
          <el-select v-model="systemHook.protocol">
            <el-option
              v-for="item in protocolList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('user')+$t('name')"
        >
          <el-input v-model="systemHook.connectUser" :disabled="systemHook.hookId"/>
        </el-form-item>
        <el-form-item
          :label="$t('password')"
        >
          <el-input v-model="systemHook.connectPassword" :disabled="systemHook.hookId"/>
        </el-form-item>
        <el-form-item :label="$t('type')" :disabled="systemHook.hookId">
          <el-select v-model="systemHook.connectType" @change="typeChange">
            <el-option
              v-for="item in typeWithProtocolList"
              :key="item.type"
              :label="item.type"
              :value="item.type"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('status')">
          <el-switch
            v-model="systemHook.deviceStatus"
          />
        </el-form-item>
        <el-form-item :label="$t('warn')">
          <el-switch
            v-model="systemHook.deviceWarn"
          />
        </el-form-item>
        <el-form-item :label="$t('upload')">
          <el-switch
            v-model="systemHook.deviceUpload"
          />
        </el-form-item>
        <el-form-item :label="$t('server')">
          <el-select v-model="systemHook.serverId">
            <el-option
              v-for="item in serverList"
              :key="item.serverId"
              :label="item.name"
              :value="item.serverId"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('company')">
          <el-select v-model="systemHook.companyId">
            <el-option
              v-for="item in companyList"
              :key="item.companyId"
              :label="item.companyName"
              :value="item.companyId"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('user')"
        >
          <el-input v-model="systemHook.userName" disabled/>
        </el-form-item>
        <el-form-item
          :label="$t('device')"
        >
          <el-input v-model="systemHook.deviceName" disabled/>
        </el-form-item>
        <el-form-item :label="$t('dept')" @change="treeCompanyDept">
          <el-cascader
            v-model="systemHook.deptId"
            filterable
            :options="treeDeptData"
            :props="{value:'id',label:'name',checkStrictly:true,emitPath:false}"
          />
        </el-form-item>
        <el-form-item :label="$t('product')">
          <el-select v-model="systemHook.productId" @change="seriesDeviceNum">
            <el-option
              v-for="item in productList"
              :key="item.productId"
              :label="item.name"
              :value="item.productId"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('series')">
          <el-select v-model="systemHook.seriesId">
            <el-option
              v-for="item in seriesList"
              :key="item.seriesId"
              :label="item.name"
              :value="item.seriesId"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('province')">
          <el-select v-model="systemHook.provinceId" @change="cityDeviceNum">
            <el-option
              v-for="item in provinceList"
              :key="item.provinceId"
              :label="item.province"
              :value="item.provinceId"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('city')">
          <el-select v-model="systemHook.cityId">
            <el-option
              v-for="item in cityList"
              :key="item.cityId"
              :label="item.city"
              :value="item.cityId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCropVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="addOrUpdate">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { cancelNotice, formatDate, successNotice } from '@/util/common'
import { deleteSystemHook, insertSystemHook, listSystemHook, updateSystemHook } from '@/api/iot/iotSystemHookApi'
import { getCompanyId, getShortCompanyName } from '@/util/storage'
import { cityDeviceNum, productDeviceNum, provinceDeviceNum, seriesDeviceNum } from '@/api/iot/iotDeviceApi'
import { listDeviceServer } from '@/api/iot/iotDeviceServerApi'
import { treeCompanyDept } from '@/api/auth/authCompanyDeptApi'
import { listAllCompany } from '@/api/auth/authCompanyApi'
import { listTypeWithProtocolList } from '@/api/hook/hookHandlerApi'

export default {
  name: 'SystemHook',
  data() {
    return {
      systemHookList: [],
      systemHook: {
        deviceWarn: true,
        deviceUpload: true,
        deviceStatus: true,
        connectType: '',
        topic: '',
        protocol: '',
        serverId: 0,
        companyId: 0,
        deptId: 0,
        productId: 0,
        seriesId: 0,
        provinceId: 0,
        retryNum: 0,
        cityId: 0
      },
      dialogCropVisible: false,
      companyList: [],
      treeDeptData: [],
      deviceServerList: [],
      productList: [],
      seriesList: [],
      provinceList: [],
      cityList: [],
      typeWithProtocolList: [],
      protocolList: []
    }
  }, created() {
    this.listTypeWithProtocolList()
    this.listDeviceServer()
    this.listAllCompany()
  },
  methods: {
    listTypeWithProtocolList() {
      listTypeWithProtocolList().then(res => {
        const { code, data } = res
        if (code === '200') {
          this.typeWithProtocolList = data
        }
        this.listSystemHook()
      })
    },
    formatConnectType(item) {
      for (const connectType of this.typeWithProtocolList) {
        if (connectType.type === item.connectType) {
          return connectType.type
        }
      }
    },
    listDeviceServer() {
      listDeviceServer({}).then(res => {
        const { data, code } = res
        if (code === '200') {
          data.unshift({
            serverId: 0,
            name: this.$t('all')
          })
          this.serverList = data
        }
      })
    },
    listAllCompany() {
      listAllCompany({
        parentCompanyId: getCompanyId()
      }).then(res => {
        const { data, code } = res
        if (code === '200') {
          data.unshift({
            companyId: parseInt(getCompanyId()),
            companyName: getShortCompanyName()
          })
          data.unshift({
            companyId: 0,
            companyName: this.$t('all')
          })
          this.companyList = data
        }
        this.systemHook.companyId = parseInt(getCompanyId())
        this.systemHook.deptId = 0
        this.treeCompanyDept()
      })
    },
    treeCompanyDept() {
      if (!this.systemHook.companyId) {
        return
      }
      treeCompanyDept({
        companyId: this.systemHook.companyId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.treeDeptData = data
        }
      })
    },
    productDeviceNum() {
      productDeviceNum({}).then(res => {
        const { data, code } = res
        if (code === '200') {
          data.unshift({
            productId: 0,
            name: this.$t('all')
          })
          this.productList = data
        }
        this.systemHook.seriesId = 0
        this.seriesDeviceNum()
      })
    },
    seriesDeviceNum() {
      seriesDeviceNum({
        productId: this.systemHook.productId === 0 ? null : this.systemHook.productId
      }).then(res => {
        const { data, code } = res
        if (code === '200') {
          data.unshift({
            seriesId: 0,
            name: this.$t('all')
          })
          this.seriesList = data
        }
        this.provinceDeviceNum()
      })
    },
    provinceDeviceNum() {
      provinceDeviceNum({
        productId: this.systemHook.productId === 0 ? null : this.systemHook.productId
      }).then(res => {
        const { data, code } = res
        if (code === '200') {
          data.unshift({
            provinceId: 0,
            province: this.$t('all')
          })
          this.provinceList = data
        }
        this.systemHook.cityId = 0
        this.cityDeviceNum()
      })
    },
    cityDeviceNum() {
      cityDeviceNum({
        provinceId: this.systemHook.provinceId === 0 ? null : this.systemHook.provinceId
      }).then(res => {
        const { data, code } = res
        if (code === '200') {
          data.unshift({
            cityId: 0,
            city: this.$t('all')
          })
          this.cityList = data
        }
      })
    },

    formatDate(time) {
      return formatDate(this, time)
    },
    showInsert() {
      this.systemHook = {
        deviceWarn: true,
        deviceUpload: true,
        deviceStatus: true,
        connectType: this.typeWithProtocolList[0].type,
        protocol: this.typeWithProtocolList[0].protocolList[0],
        topic: '',
        companyId: getCompanyId(),
        serverId: 0,
        deptId: 0,
        productId: 0,
        seriesId: 0,
        provinceId: 0,
        cityId: 0
      }
      this.protocolList = this.typeWithProtocolList[0].protocolList
      this.listAllCompany()
      this.productDeviceNum()

      this.dialogCropVisible = true
    },
    typeChange() {
      for (const item of this.typeWithProtocolList) {
        if (item.type === this.systemHook.connectType) {
          this.protocolList = item.protocolList
          this.systemHook.protocol = item.protocolList[0]
        }
      }
    },
    listSystemHook() {
      listSystemHook({}).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.systemHookList = data
        } else {
          this.systemHookList = []
        }
      })
    },
    changeStatus(item) {
      const that = this
      this.$confirm(this.$t('change') + this.$t('status'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          updateSystemHook({
            hookId: item.hookId,
            status: !item.status
          }).then(res => {
            const { code } = res
            if (code === '200') {
              that.listSystemHook()
              successNotice(that)
            }
          })
        })
    },
    addOrUpdate() {
      const json = {
        ...this.systemHook
      }
      if (!json.hookId) {
        insertSystemHook(json).then(res => {
          const { code } = res
          if (code === '200') {
            this.dialogCropVisible = false
          }
          this.listSystemHook()
        })
      } else {
        updateSystemHook(json).then(res => {
          const { code } = res
          if (code === '200') {
            this.dialogCropVisible = false
          }
          this.listAllCompany()
        })
      }
    },
    edit(systemHook) {
      this.systemHook = systemHook
      for (const item of this.typeWithProtocolList) {
        if (item.type === this.systemHook.connectType) {
          this.protocolList = item.protocolList
        }
      }
      this.productDeviceNum()
      this.dialogCropVisible = true
    },

    del(item) {
      const that = this
      this.$confirm(this.$t('delete') + item.name, this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteSystemHook({
            hookId: item.hookId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
              that.listSystemHook()
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    }
  }
}
</script>

